<template>
    <!-- 组件的结构 -->
    <div class="app">
        <button @click="isShow=!isShow">显示/隐藏</button>
        <transition name="hello" :appear="true"><h1 v-show="isShow">{{msg}}</h1></transition>
    </div>  
</template>

<script>
    export default{
            name:'Test-show',
            data(){
                return{
                    msg:'欢迎学习Vue！！！',
                    isShow:true
                }
            },
            }
</script>

<style>
    .hello-enter-active{
        animation: heima 0.5s linear;
    }
    .hello-leave-active{
        animation: heima 0.5s reverse linear;
    }
    @keyframes heima{
        from{
            transform: translateX(-100%);
        }
        to{
            transform: translateX(0px);
        }
    }
</style>